<template>
  <div>
    <category-add :categories="categories" :add="add"></category-add>
    <category-list :categories="categories" :del="del"></category-list>
  </div>
</template>

<script>
import CategoryList from "./CategoryList";
import CategoryAdd from "./CategoryAdd";
import axios from "axios";

export default {
  name: "CategoryManager",
  components: {
    CategoryAdd,
    CategoryList
  },
  data() {
    return {
      categories: []
    };
  },
  mounted() {
    axios.get(this.host + "/category/list").then(r => {
      this.categories = r.data.data;
    });
  },
  methods: {
    add(cate) {
      this.categories.push(cate);
    },
    del(index) {
      // 弹窗确认
      this.$confirm("此操作将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post(
              this.host + "/category/del/" + this.categories[index].id
            )
            .then(r => {
              if (r.data.code == "200") {
                this.categories.splice(index,1);
                // this.categories[index].status = "2";
                this.suc("删除成功!");
              }
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
</style>